@import '~@/style/base.less';
@header_height: 120px; 
@common_padding: 28px;
@hot_recommendation_height: 200px;
@login_remind_card_height : 350px;
@border-raduis: 10px;

.header {
  position: fixed;
  z-index: 0;
  left: 0;
  top: 0;
  background: linear-gradient(134deg,#ffe694,#ffd343);
  width: 100%;
  height: @header_height;
  .frow(space-between, center, columns);
  padding: 0 @common_padding;
}
.header_hidden {
  height:  @header_height;
}

.login_remind_card {
  height: @login_remind_card_height;
  background: cornsilk;
  position: absolute;
  z-index: 11;
  top: @header_height - 20;
  left: 28px;
  right: 28px;
  border-radius: @border-raduis;
}

.login_remind_card_hidden {
  height: @login_remind_card_height - 20;
}

// 热门推荐
.hot_recommendation {
  height: @hot_recommendation_height;
  background: cornflowerblue;
}

// meal容器
.meal_set_style {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 26px;
  .menu_list_style {
    position: sticky;
    top: @header_height;
    width: 20vw;
    height: calc(100vh - @header_height + @login_remind_card_height  + @login_remind_card_height - 20px);
    display: inline-block;
    vertical-align: top;
    overflow-y: scroll;
    // -webkit-overflow-scrolling: touch
  }
  .meal_list_style {
    background: #fff;
    display: inline-block;
    width: 80vw;
    padding: 0 40px 28px 26px;
    .category_list_header{
      position: sticky;
      top: @header_height;
      left: 0;
      z-index: 2;
      margin: 0 -40px 0 -26px;
    }
    .menu_list {
      margin-bottom: 26px;
      .meal_list_category_container {
        position: relative;
        height: 40px;
        background: #fff;
        display: flex;
        align-items: center;
        padding-right: 40px
      }
      .meal_detail_set {
        padding: 28px 0;
        margin-bottom: 26px;
        .dish_item {
          position: relative;
          display: flex;
          min-height: 220px;
          color: #333;
          .dish_img_wrapper {
            position: relative;
            width: 200px;
            height: 200px;
            flex-shrink: 0;
            border-radius: @border-raduis;
            overflow: visible;
            z-index: 0;
            .dish_img {
              width: 200px;
              height: 200px;
              border-radius: @border-raduis
            }
          }
          .dish_details {
            flex-grow: 1;
            padding-left: 26px;
            display: flex;
            flex-direction: column;
            min-width: 0
          }
        }
      }
    }
  }
}
